<template>
	<div class="pageStyle" style="height: 100%;padding: 0px 20px">
		<div class="pageStyle-head">
			<span>{{i18n('history','历史记录（最多20条）')}}</span>
			<div style="margin-right: 10px;">
				<a-button @click="rollback">{{i18n('rollback','回滚到此版本')}}</a-button>
			</div>
		</div>
		<div style="margin-top: 20px">
			<ul>
				<li v-for="(history,index) in viewHistories" :key="index" @click="versions(index)">
					<div class="ScreenViewHistory-common" :class="{'ScreenViewHistory-common-hover':selectIndex==index,'ScreenViewHistory-common-versions':versionsId==index}">
						<div class="ScreenViewHistory-common-on">{{history.createTime}}<span class="ScreenViewHistory-common-span" v-if="versionsId==index">{{i18n('curVersion','当前版本')}}</span></div>
						<div class="ScreenViewHistory-common-to">{{history.createByName}}</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import ScreenViewHistoryApi from '@/api/screen/core/screen-view-history'
export default {
	name: 'ScreenViewHistory',
	props:["screenConfig","viewId","rollbackHistory","versionsId"],
	data() {
		return {
			viewHistories:[],
			selectIndex:this.versionsId,

		}
	},
	created() {
		this.getByViewId();
	},
	methods: {
		i18n(name,text,key){
			return this.$ti18(name,text,"designLang.historyView",key);
		},
		versions(id){
			this.selectIndex = id
		},
		getByViewId() {
			ScreenViewHistoryApi.getByViewId(this.viewId || "").then(res=>{
				if(res.success){
					this.viewHistories=res.data;
				}
			});
		},
		rollback(){
			let self=this;
			this.$confirm({
				title: this.$ti18('rxMsa.actionTips','操作提示'),
				zIndex: 20000,
				content:this.i18n('rollbackMsa','您确定需要回滚到此版本吗？'),
				okText: this.$ti18('rxForm.ackBtn','确认'),
				cancelText: this.$ti18('rxForm.cancelBtn','取消'),
				onOk() {
					let viewHistory = self.viewHistories[self.selectIndex];
					if(viewHistory){
						self.rollbackHistory(JSON.parse(viewHistory.config),self.selectIndex);
					}
				},
				onCancel() {
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.ScreenViewHistory-common{
	width: 390px;
	height: 64px;
	padding: 15px;
	overflow: hidden;
	cursor: pointer;
}
.ScreenViewHistory-common:hover{
	background-color: #eff5ff;
	border-radius: 4px;
}
.ScreenViewHistory-common:hover div{
	color: #4285f4;
}
.ScreenViewHistory-common-on{
	font-size: 14px;
	color: #333333;
}
.ScreenViewHistory-common-to{
	font-size: 14px;
	color: #666666;
}
.ScreenViewHistory-common-hover{
	background-color: #eff5ff;
	border-radius: 4px;
}
.ScreenViewHistory-common-versions div{
	color: #4285f4;
}
.ScreenViewHistory-common-hover div{
	color: #4285f4;
}
.pageStyle {
	.ant-collapse-borderless {
		background: white !important;
	}

	.ant-collapse-arrow {
		left: 0px !important;
	}
}
.ScreenViewHistory-common-span{
	color: white!important;
	background-color: #4285f4;
	border-radius: 4px;
	padding: 4px 15px;
	float: right;
}
.pageStyle-head {
	height: 50px;
	display: flex;
	line-height: 50px;
	border-bottom: 1px solid #dedede;
	align-items: center;

	span {
		color: #333333;
		font-size: 14px;
		font-weight: bold;
		flex: 1;
	}
}
</style>

